<template>
  <div class="handle-container">
    <div class="left">
      <div class="header" @click="$router.back(-1)">
        <i class="el-icon-arrow-left c-font-b"></i>
        <span>处理</span>
      </div>
      <!--    表单区域-->
      <div class="form">
        <el-form ref="from" :model="handleForm" label-width="80px">
          <el-form-item label="姓名:">
            <span>{{ handleForm.nickname }}</span>
          </el-form-item>
          <el-form-item label="状态:">
            <span v-if="handleForm.status === 0"> 审核中</span>
            <span v-else-if="handleForm.status === 1">处理中 </span>
            <span v-else-if="handleForm.status === 2">已完结 </span>
          </el-form-item>
          <el-form-item label="创建时间:">
            <span>{{ handleForm.createTime }}</span>
          </el-form-item>
          <el-form-item label="图片:">
            <el-image
              v-for="(item, index) in handleForm.attachmentUrls"
              :key="index"
              :src="item"
              style="width: 200px; height: 160px; margin-right: 10px"
            ></el-image>
          </el-form-item>
        </el-form>
      </div>
      <!--    按钮-->
      <div class="btns">
        <el-button size="small" type="success" @click="finish">办结</el-button>
        <el-button size="small" type="primary" @click="out">转处</el-button>
        <el-button
          v-show="user === currentHandlerId * 1 && handleForm.status === 1"
          size="small"
          type="danger"
          @click="reject"
          >驳回</el-button
        >
        <el-button size="small" @click="cancel">取消</el-button>
      </div>
    </div>
    <div class="right">
      <div class="header">
        <i class="el-icon-help" style="color: #d71820"></i>
        <span class="c-font-20 c-font-b c-m-l-10">流程足迹</span>
      </div>
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in timeline"
          :key="index"
          :icon="activity.icon"
          :type="activity.type"
          :color="activity.color"
          :size="activity.size"
          :timestamp="activity.createTime"
        >
          处理人： {{ activity.handlerName }}
          <div>结果：{{ activity.handleMessage }}</div>
          <div>转办人：{{ activity.toHandlerName }}</div>
          <div v-if="activity.handleType === 0">状态：审核中</div>
          <div v-else-if="activity.handleType === 1">状态：处理中</div>
          <div v-else-if="activity.handleType === 2">状态：已完结</div>
        </el-timeline-item>
      </el-timeline>
    </div>
    <!--  驳回对话框-->
    <el-dialog v-model="rejectDialogVisible" title="操作确认" width="30%">
      <div class="title c-text-center c-m-b-10">
        <i class="el-icon-warning-outline" style="color: #e21f1f"></i>
        <span>您确定要驳回此次反馈么？</span>
      </div>
      <el-input
        v-model="rejectContent"
        type="textarea"
        placeholder="请输入驳回原因（必填）"
      ></el-input>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitReject">确定</el-button>
          <el-button @click="rejectDialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <!--  办结对话框-->
    <el-dialog v-model="finishDialogVisible" title="操作确认" width="30%">
      <div class="title c-text-center c-m-b-10">
        <i class="el-icon-warning-outline" style="color: #e21f1f"></i>
        <span>您确定要办结此次反馈么？</span>
      </div>
      <el-input
        type="textarea"
        v-model="finishContent"
        placeholder="请输入办结原因（非必填）"
      ></el-input>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitFinsh">确定</el-button>
          <el-button @click="finishDialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <!--  转出对话框-->
    <el-dialog v-model="outDialogVisible" title="操作确认" width="30%">
      <div class="title c-text-center c-m-b-10">
        <i class="el-icon-circle-check" style="color: #1fe22f"></i>
        <span>您确定要转处此次反馈么？</span>
      </div>
      <el-form :model="outForm">
        <el-form-item>
          <el-input
            v-model="outForm.name"
            type="textarea"
            placeholder="请输入转出原因（非必填）"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="请输入搜索名称"
            size="small"
            class="c-m-r-10"
            style="width: 200px"
          ></el-input>
          <el-button type="primary" icon="el-icon-search" size="small"
            >搜索</el-button
          >
        </el-form-item>
        <el-form-item
          style="
            border: 1px solid #cccccc;
            border-radius: 6px;
            height: 200px;
            overflow-y: auto;
            overflow-x: hidden;
          "
        >
          <el-checkbox-group v-model="optionForm" style="padding: 0 10px">
            <el-checkbox
              v-for="item in handleOptionList"
              :label="item"
              name="type"
              :key="item.id"
              style="width: 100%"
              @change="changeChecke"
              >{{ item.username }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitOut">确定</el-button>
          <el-button @click="outDialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import feedbackHandle from "@/composables/canteen/feedback-handle";
export default {
  name: "FeedbackHandle",
  setup() {
    const {
      user,
      currentHandlerId,
      handleForm,
      timeline,
      reject,
      rejectDialogVisible,
      finishDialogVisible,
      out,
      outDialogVisible,
      finish,
      outForm,
      finishContent,
      submitFinsh,
      rejectContent,
      submitReject,
      handleOptionList,
      optionForm,
      changeChecke,
      submitOut,
      cancel,
    } = feedbackHandle();
    return {
      user,
      currentHandlerId,
      handleForm,
      rejectDialogVisible,
      finishDialogVisible,
      out,
      outDialogVisible,
      finish,
      outForm,
      reject,
      timeline,
      finishContent,
      submitFinsh,
      rejectContent,
      submitReject,
      handleOptionList,
      optionForm,
      changeChecke,
      submitOut,
      cancel,
    };
  },
};
</script>

<style scoped lang="scss">
.handle-container {
  height: calc(100vh - 180px);
  margin: 20px 0;
  display: flex;

  .left {
    padding: 10px;
    flex: 2;
    background: #ffffff;
    overflow-y: auto;
    border-radius: 6px;
    box-shadow: 0px 0px 16px rgba(96, 96, 96, 0.16);

    .header {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #edeff3;
      padding-left: 20px;

      .form {
        border-bottom: 1px solid #edeff3;
      }
    }
  }

  .right {
    flex: 1;
    background: #ffffff;
    margin-left: 10px;
    overflow-y: auto;
    padding: 10px;
    border-radius: 6px;
    box-shadow: 0px 0px 16px rgba(96, 96, 96, 0.16);

    .header {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #edeff3;
      margin-bottom: 10px;
    }
  }
}
</style>
